<template>
	<view>
		<!-- 图片轮播 S -->
		<view class="img_swiper_box">
			<swiper @change="change" class="swiper" circular autoplay="true" interval="2000" duration="500">
				<swiper-item class="tp-w100 tp-h100" v-for="(item,index) in swpList" :key="index" @click="previewImg(item,swpList)">
					<view class="swiper-item">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<swiper-dot class="dot" :current="current" :list="swpList"></swiper-dot>
			<!-- <text class="img-lable">跟团游</text> -->
		</view>
		<!-- 图片轮播 E -->
		<!-- 简介信息 S -->
		<view class="hotel-info tp-pd30 tp-pb20 tp-bgf tp-pr tp-mb2">
			<view class="level_align flex_between">
				<text class="tp-fz32 tp-fc333 tp-fw600 tp-lh54 flex-1">{{info.travelName || ''}}</text>
			</view>
			<view class="ellispsis2 tp-fc666 tp-fz26 tp-lh44  tp-mt10">{{info.travelIntro || ''}}</view>

			<view class="level_align flex_between tp-mt15">
				<view class="flex align_baseline tp-red tp-fz24">
					￥<text class="tp-fz36">{{info.totalAmount || 0}}</text>起
				</view>
			</view>
		</view>
		<view class="level_align flex_wrap tp-ofh tp-ptb0lr30 tp-bgf tp-pt20">
			<view class="quan-tag tp-wsn tp-lh40 tp-mr20 tp-mb20 tp-fc tp-bgf tp-br8 tp-border1 tp-fz22" v-for="(item,index) in info.travelLabels"
			 :key="index">
				{{item}}
			</view>
		</view>
		<!-- 简介信息 E -->


		

		<!-- 展示选择 S -->
		<view class="tp-h98 level_align flex_between tp-fc333 tp-fz32 tp-bgf tp-mt20 tp-mb2">
			<view class="center_combo flex-1 tp-h100" :class="{actice : actice == 0}" @click="actice = 0">
				行程特色
			</view>
			<view class="center_combo flex-1 tp-h100" :class="{actice : actice == 1}" @click="actice = 1">
				{{info.travelDay || 0}}日行程
			</view>
			<view class="center_combo flex-1 tp-h100" :class="{actice : actice == 2}" @click="actice = 2">
				报价明细
			</view>
		</view>
		<!-- 展示选择 E -->
		<!-- 行程 S -->
		<view class="tp-lh44 tp-pd30 tp-fz26 tp-fc333 tp-bgf" v-if="actice == 0">
			<jyf-parser :html="info.travelTrait" ref="article"></jyf-parser>

		</view>
		<!-- 行程 E -->
		<!-- 行程内容 S -->
		<view class=" tp-pd30 tp-bgf" v-if="actice == 1">
			<!-- 总览 S -->
			<view class="level_align flex_around  tp-pt30 tp-pb30 tp-bcF5 tp-br8 tp-fc333 tp-fz36">
				<view class="column_align flex_between flex-1 tp-h88"  v-for="(item,index) in jihuaZong" :key="index">
					<view class="">
						{{item.value}}
					</view>
					<view class="tp-fz28 tp-fc666">
						{{item.lable}}
					</view>
				</view>
			</view>
			<!-- 总览 E -->
			<!-- 明细 S -->
			<view class="flex tp-mt30 tp-lh44" v-for="(bagItem,index) in jihuaDetail" :key="index">
				<view class="tp-w88  tp-fc333 tp-fz36">
					D{{bagItem.dayNum}}
				</view>
				<view class="flex flex-1 flex_column tp-fc333 tp-fz28">
					<jyf-parser :html="bagItem.content" ref="article"></jyf-parser>
					<!-- <view class="tp-fz30">
						{{bagItem.title}}
					</view> -->
					<view class="flex flex_column tp-mt15" v-for="(item,ind) in bagItem.descVoList" :key="ind">
						<!-- <view class="">
							<text class="tp-fc666 tp-mr15">{{item.name}}： </text>
							<text>{{item.value}}</text>
						</view> -->
						<!-- 酒店 S -->
						<view v-if="item.modelType == 1" class="tp-pd20 tp-bbox flex tp-bcF5 tp-br8 tp-mt15 tp-mb20" @click="pageJumps('../hotel/hotelDetail?id=' + item.modelId)">
							<image class="hotel-img tp-br8 tp-mr20" :src="wwwImgUrl + item.hotelIndexIntroVo.hotelCover" mode="aspectFill"></image>
							<view class="flex flex_column flex-1">
								<view class="tp-fc tp-fz30 ellispsis1">
									{{item.hotelIndexIntroVo.hotelName}}
								</view>
								<view class="tp-yellow tp-mt10 tp-fz24">
									{{item.hotelIndexIntroVo.hotelLevel}} | {{item.hotelIndexIntroVo.hotelScore}}分
								</view>
							</view>
						</view>
						<!-- 酒店 E -->
						<!-- 景区 S -->
						<view class="tp-pd20 tp-bbox flex tp-bcF5 tp-br8 tp-mt15 tp-mb20" @click="pageJumps('../scenic/scenicDetail?id=' + item.modelId)"  v-if="item.modelType == 2">
							<image class="scenic-img tp-br12 tp-mr20" :src="wwwImgUrl + item.jqIndexIntroVo.jqCover" mode="aspectFill"></image>
							<view class="flex flex_column flex-1">
								<view class="tp-fc tp-fz30 ellispsis1">
									{{item.jqIndexIntroVo.jqName}}
								</view>
								<view class="tp-fc666 tp-fz24 tp-mt10 ellispsis2">
									{{item.jqIndexIntroVo.jqIntro}}
								</view>
							</view>
						</view>
						<!-- 景区 E -->
					</view>
				</view>
			</view>
			<!-- 明细 S -->
		</view>
		<!-- 行程内容 E -->
		
		<!-- 报价明细 S -->
		<view class="tp-pd30 tp-bgf" v-if="actice == 2">
			<view class="tp-fc666 tp-fz28 tp-lh44 tp-mb20" >
				<jyf-parser :html="info.travelPriceDetail" ref="article"></jyf-parser>
				<!-- <view class="tp-fc333 tp-fz30 tp-fw600 lh54">
					{{bagItem.title}}
				</view>
				<view class="tp-mt10" v-for="(item,ind) in bagItem.detail" :key="ind">
					<text class="tp-mr15">{{item.name}}： </text>
					<text>{{item.value}}</text>
				</view> -->
			</view>
		</view>
		<!-- 报价明细 E -->

		<view class="tp-h98 level_align flex_between tp-ptb0lr30 tp-bgf tp-btn-h100" v-if="info.status == 3">
			<view class="column_align" @click="handleKeFu">
				<image class="tp-img44" src="../static/icon/kefu.png" mode=""></image>
				<text class="tp-fc333 tp-fz22">客服</text>
			</view>
			<view class="buy-btn tp-br12 tp-fz32 tp-fcF tp-h72 center_combo tp-ls4" @click="pageJumps('/pagesUser/makeOrderSubmit?id=' + orderId)">
				确认定制
			</view>
		</view>
		<view class="tp-h98 tp-mt20"></view>
		<!-- 客服服务电话弹框 S-->
		<CommonServicePhone ref="takePhone" type="9"></CommonServicePhone>
		<!-- 客服服务电话痰喘 E-->
	</view>
</template>

<script>
	import swiperDot from '@/components/swiperDot/swiperDot.vue';
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
	import CommonServicePhone from '@/components/common/common-servicePhone.vue'
	export default {
		components: {
			swiperDot,
			jyfParser,
			CommonServicePhone
		},
		data() {
			return {
				current: 0, // swiper
				orderId: "17", //订单id
				actice: 0, // 0 行程特色 1 5日行程	2 报价明细
				swpList: [], // 轮播
			
				jihuaZong: [], // 计划总览
				jihuaDetail: [], // 行程明细
				info: {}, // 页面数据
				travelGroupSkuVos: {}, // 	旅游规格信息
			};
		},
		onLoad(opt) {
			this.orderId = opt.id;
		},
		onShow() {
			this.getPageInfo()
		},
		onPullDownRefresh() {
			this.getPageInfo()
		},
		methods: {
			// 获取页面数据
			getPageInfo() {
				this.$http.get(this.$api.customizedInfoDesc + '?orderId=' + this.orderId).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.info = res.data
						this.jihuaZong = [{
							lable: '天数',
							value: res.data.travelDay
						}, {
							lable: '景区',
							value: res.data.jqNum
						}, {
							lable: '交通',
							value: res.data.trafficNum
						}, {
							lable: '酒店',
							value: res.data.hotelNum
						}, ]
						this.jihuaDetail = res.data.travelGroupDetailDescVos
						this.travelGroupSkuVos = res.data.travelGroupSkuVos
						this.swpList = []
						res.data.travelBanners.map(item => {
							this.swpList.push(this.$imgUrl + item)
						})
						uni.setNavigationBarTitle({
							title: this.info.travelName
						});
					}
				})
			},
			// swiper 切换
			change(e) {
				this.current = e.detail.current;
			},
			// 预览图片
			previewImg(url, arrlist) {
				console.log(url);
				let arr = []
				// arrlist.forEach(item => {
				// 	arr.push(item.url)
				// })
				uni.previewImage({
					current: url,
					urls: arrlist,
					success: function() {
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 点击客服
			handleKeFu() {
				this.$refs.takePhone.show()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.img_swiper_box {
		width: 750rpx;
		height: 447rpx;
		position: relative;
	}

	.dot {
		position: absolute;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
	}

	.img-lable {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		padding: 6rpx 10rpx;
		background: rgba(0, 0, 0, .3);
		color: rgba(255, 255, 255, .8);
		border-radius: 8rpx;
	}

	.quan-tag {
		display: inline-block;
		padding: 0 6rpx;
		border-color: $tc;
	}

	// 评价
	.evaluate-box {
		.imgs {
			width: 146rpx;
			height: 130rpx;
		}
	}

	.actice {
		color: $tc;
		position: relative;

		&::after {
			position: absolute;
			bottom: -3rpx;
			left: 50%;
			transform: translateX(-50%);
			content: '';
			width: 36rpx;
			height: 6rpx;
			background: #00B4FF;
			border-radius: 3rpx;
		}
	}
	.hotel-img {
		width: 136rpx;
		height: 114rpx;
	}
	.scenic-img{
		width: 194rpx;
		height: 146rpx;
	}
	.buy-btn{
		width: 600rpx;
		background: #FFAF3C;
	}
</style>
